<template>
  <el-form>
    <el-form-item label="用户">
      <user-selector v-model:user-id="searchVO.userId"></user-selector>
    </el-form-item>
    <el-form-item label="类型">
      <el-select v-model="searchVO.type" placeholder="请选择类型">
        <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker
          v-model="timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
      />
    </el-form-item>
    <el-form-item>
      <el-button
          type="primary"
          @click="handleQuery"
      >
        <el-icon style="margin-right: 5px">
          <Search/>
        </el-icon>
        搜索
      </el-button>
      <el-button
          @click="resetQuery"
      >
        <el-icon style="margin-right: 5px">
          <Refresh/>
        </el-icon>
        重置
      </el-button>
    </el-form-item>
  </el-form>
  <invite-withdrawal-check v-model:dialog-visible="checkDialogShow" @submit="loadData"
                           :id="updateRowId"></invite-withdrawal-check>
  <invite-withdrawal-refuse v-model:dialog-visible="refuseDialogShow" @submit="loadData"
                            :id="updateRowId"></invite-withdrawal-refuse>
  <el-table :data="pageInfo.list" style="width: 100%">
    <el-table-column prop="id" label="编号" width="180"/>
    <el-table-column prop="userId" label="邀请者id" width="180"/>
    <el-table-column prop="inviteeId" label="被邀请者Id" width="100"/>
    <el-table-column prop="amount" label="奖励金额/提现金额" width="180"/>
    <el-table-column prop="type" label="类型" width="180"/>
    <el-table-column prop="remark" label="备注" width="180"/>
    <el-table-column prop="orderId" label="抽成订单号" width="180"/>
    <el-table-column prop="createTime" label="创建日期"/>
    <el-table-column prop="updateTime" label="更新日期"/>
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="{row}">
        <el-button type="warning" size="small" @click="handleCheck(row)" v-if="row.type=='提现'&&row.status===0">
          <el-icon style="margin-right: 8px">
            <Edit/>
          </el-icon>
          同意
        </el-button>
        <el-button type="danger" size="small" @click="handleRefuse(row)" v-if="row.type=='提现'&&row.status===0">
          <el-icon style="margin-right: 8px">
            <Delete/>
          </el-icon>
          拒绝
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:currentPage="searchVO.pageNum"
      :page-size="searchVO.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="loadData"
      @size-change="handleSizeChange"
      :total="pageInfo.total"
  >
  </el-pagination>
</template>
<script lang="ts">
import {defineComponent} from "vue";
import {Invite, SearchVO, User} from "@/typings";
import {ElMessage, ElMessageBox} from "element-plus";
import {INVITE_TYPE_EXTRACT, INVITE_TYPE_INVITE, INVITE_TYPE_WITHDRAWAL, listInvite} from "@/api/post/invite";
import moment from "moment";
import {listUser} from "@/api/system/user";
import InviteWithdrawalCheck from "@/components/post/invite/invite-withdrawal-check.vue";
import InviteWithdrawalRefuse from "@/components/post/invite/invite-withdrawal-refuse.vue";
import UserSelector from "@/components/system/user/user-selector.vue";

export default defineComponent({
  components: {UserSelector, InviteWithdrawalRefuse, InviteWithdrawalCheck},
  data() {
    return {
      pageInfo: {
        list: [],
        pages: 1
      },
      searchVO: {
        keyword: '',
        pageNum: 1,
        pageSize: 10,
      } as SearchVO,
      typeList: [
        {label: '邀请', value: INVITE_TYPE_INVITE},
        {label: '抽成', value: INVITE_TYPE_EXTRACT},
        {label: '提现', value: INVITE_TYPE_WITHDRAWAL},
      ],
      checkDialogShow: false,
      refuseDialogShow: false,
      updateRowId: '0',
      timeRange: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    handleRefuse(row: Invite) {
      this.updateRowId = row.id
      this.refuseDialogShow = true
    },
    handleCheck(row: Invite) {
      this.updateRowId = row.id
      this.checkDialogShow = true
    },
    loadData() {
      if (this.timeRange.length > 0) {
        this.searchVO.startTime = moment(this.timeRange[0]).format('YYYY-MM-DD HH:mm:ss')
        this.searchVO.endTime = moment(this.timeRange[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      listInvite(this.searchVO).then(res => {
        this.pageInfo = res
      })
    },
    handleQuery() {
      this.searchVO.pageNum = 1
      this.loadData()
    },
    handleSizeChange(val: number) {
      this.searchVO.pageSize = val
    },
    resetQuery() {
      this.searchVO = {
        userId: undefined,
        type: undefined,
        startTime: undefined,
        endTime: undefined,
        timeRange: undefined,
        keyword: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.timeRange = []
    },
  }
})
</script>
<style lang="scss" scoped>

</style>